import React, {Component} from 'react';
import {Transition} from 'react-transition-group';

const styles = {
  width: 200,
  height: 200,
  transition: 'all 1s ease-in-out',
  background: 'pink'
};

const transitionStyles = {
  entering: {opacity: 1},
  entered: {opacity: 1},
  exiting: {opacity: .5},
  exited: {opacity: .5}
};

class Fade extends Component {
  constructor (props) {
    super(props);
    this.state = {
      show: false
    }
  }
  // 添加transition动画完成的监听事件
  addEndListener = (node, done) => {
    // console.log(node, done);
    node.addEventListener('transitionend', this.done, false);
  }
  // 完成的动作函数
  done = () => {
    console.log('transition end');
  }
  // onEnter (node, isAppearing) {}
  // onEntering (node, isAppearing) {}
  onEntering = (node, isAppearing) => {
    console.log('entering', node, isAppearing)
  }
  // onEntered (node, isAppearing) {}
  // onExit (node)
  // onExiting (node)
  // onExited (node)

  fnEnter = () => {
    this.setState({show: true});
  };

  fnLeave = () => {
    this.setState({show: false});
  };

  render () {
    return (
      <Transition
        in={this.state.show}
        timeout={1000}
        onEntering={this.onEntering}
        addEndListener={this.addEndListener}
      >
        {
          state => (
            <div onMouseEnter={this.fnEnter} onMouseLeave={this.fnLeave} style={{...styles, ...transitionStyles[state]}}></div>
          )
        }
      </Transition>
    )
  }
}

export default Fade;
